<template>
    <div class="box">
        <div class="header">
            <van-nav-bar
              title="登录界面"
              right-text="去注册"
              left-arrow
              @click-left="onClickLeft"
              @click-right="onClickRight"
            />
        </div>
        <div class="content">
            <van-tabs v-model="active">
              <van-tab title="用户名登录">
                <van-form @submit="onSubmitUser">
                  <van-field
                    v-model="username"
                    clearable
                    name="userName"
                    label="用户名"
                    placeholder="用户名"
                    :right-icon = "userTip"
                  />
                  <van-field
                    v-model="password"
                    clearable
                    type="password"
                    name="passWord"
                    label="密码"
                    placeholder="密码"
                    :right-icon = "passwordTip1"
                  />
                  <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" :disabled="allTip1">
                      登录
                    </van-button>
                  </div>
                </van-form>
              </van-tab>
              <van-tab title="手机号登录">
                <van-form @submit="onSubmitTel">
                  <van-field
                    v-model="tel"
                    clearable
                    name="tel"
                    label="手机号"
                    placeholder="请输入手机号"
                    :right-icon = "telTip"
                  />
                  <van-field
                    v-model="password"
                    clearable
                    type="password"
                    name="passWord"
                    label="密码"
                    placeholder="密码"
                    :right-icon = "passwordTip2"
                  />
                  <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" :disabled="allTip2">
                      登录
                    </van-button>
                  </div>
                </van-form>
              </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import Cookies from 'js-cookie'

import { NavBar, Form, Field, Button, Toast, Tab, Tabs } from 'vant'
import { login } from '../../api/index'
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Tab)
Vue.use(Tabs)
export default {
  data () {
    return {
      username: '',
      password: '',
      tel: '',
      active: 2
    }
  },
  methods: {
    // 使用的是push的路由跳转方式 使用$router.back可以返回上层路由
    onClickLeft () {
      // 利用$router.back()回到上层路由
      this.$router.back()
    },
    // 去登录
    onClickRight () {
      this.$router.push('/register')
    },
    // 将表单数据进行验证 并发送到后台中去
    // 用户名登陆验证
    onSubmitUser (val) {
      login(val).then(res => {
        switch (res.data.state) {
          case 201:
            Toast({
              message: '用户名没有注册',
              onClose: () => {
                this.$router.push('/register')
              }
            })
            break
          case 202:
            Toast('密码不符')
            break
          case 200:
          // 登陆成功之后将用户的唯一信息和登陆状态存放在本地存储
            Cookies.set('userId', res.data.id, { expires: 3 })
            Cookies.set('isLogin', 'ok', { expires: 3 })
            Cookies.set('token', res.data.token, { expires: 3 })
            Toast({
              message: '登陆成功',
              onClose: () => {
                // 登陆成功之后解析当前路由 跳转到解析之后的路由 this.$route.query.to
                if (this.$route.query.to) {
                  this.$router.push(this.$route.query.to)
                } else {
                  this.$router.push('/home')
                }
              }
            })
        }
      })
    },
    // 手机号码登陆验证
    onSubmitTel (val) {
      login(val).then(res => {
        // console.log(res.data)
        switch (res.data.state) {
          case 201:
            Toast({
              message: '用户名没有注册',
              onClose: () => {
                this.$router.push('/register')
              }
            })
            break
          case 202:
            Toast('密码不符')
            break
          case 200:
          // 登陆成功之后将用户的唯一信息和登陆状态存放在本地存储
            Cookies.set('userId', res.data.id, { expires: 3 })
            Cookies.set('isLogin', 'ok', { expires: 3 })
            Cookies.set('token', res.data.token, { expires: 3 })
            Toast({
              message: '登陆成功',
              onClose: () => {
                this.$router.push('/home')
              }
            })
        }
      })
    }
  },
  // 通过计算进行正则验证 给出符合情况下的状态
  computed: {
    userTip () {
      // 用户名的正则验证 ^.第一位为任意的字符
      if (/^.{2,12}$/.test(this.username)) {
        return 'success'
      } else {
        return ''
      }
    },
    telTip () {
      if (/^1[3-9]\d{9}$/.test(this.tel)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip1 () {
      if (/^\w{6,12}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    passwordTip2 () {
      if (/^\w{6,12}$/.test(this.password)) {
        return 'success'
      } else {
        return ''
      }
    },
    // 判断以上所以表单的验证 符合则解锁登录按钮
    allTip1 () {
      // 注册按钮的可用状态,根据所有输入框的状态决定
      // 只有当所有的验证都符合条件的时候才对注册按钮进行解禁
      if (this.userTip && this.passwordTip1) {
        return false
      } else {
        return true
      }
    },
    allTip2 () {
      // 注册按钮的可用状态,根据所有输入框的状态决定
      // 只有当所有的验证都符合条件的时候才对注册按钮进行解禁
      if (this.telTip && this.passwordTip2) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss">
</style>
